<template>
  <div :style="{ overflow: 'auto', height: height + 'px' }">
    <div class="profile">
      <h2>{{ $t("m.CompanyProfile") }}</h2>
      <ul>
        <li class="f-cb">
          <p>{{ $t("m.StockCode") }}</p>
          <span>{{ info.symbol }}</span>
        </li>
        <li class="f-cb">
          <p>{{ $t("m.companyName") }}</p>
          <!-- 公司名称 -->
          <span>{{ info.company_name }}</span>
        </li>
        <li class="f-cb">
          <p>{{ $t("m.Chairman") }}</p>
          <!-- 董事长 -->
          <span>{{ info.chairman }}</span>
        </li>
        <!-- 所属行业 -->
        <li class="f-cb">
          <p>{{ $t("m.Industry") }}</p>
          <span>{{ info.industry }}</span>
        </li>
        <li class="f-cb">
          <!-- 董秘 -->
          <p>{{ $t("m.DongMi") }}</p>
          <span>{{
            info.chairman_secretary == "" ? "--" : info.chairman_secretary
          }}</span>
        </li>

        <li class="f-cb">
          <!-- 成立日期 -->
          <p>{{ $t("m.dateEstablishment") }}</p>
          <span>{{ info.establish_date }}</span>
        </li>
        <li class="f-cb">
          <!-- 注册资本 -->
          <p>{{ $t("m.registeredCapital") }}</p>
          <span>{{ info.register_capital }}</span>
        </li>
        <li class="f-cb">
          <!-- 公司网址 -->
          <p>{{ $t("m.CompanyWebsite") }}</p>
          <span>{{
            (info.company_website == "" ? "--" : info.company_website)
          }}</span>
        </li>
        <li class="f-cb">
          <!-- 注册地址 -->
          <p>{{ $t("m.RegisteredAddress") }}</p>
          <span>{{
            info.registered_address == "" ? "--" : info.registered_address
          }}</span>
        </li>
        <li class="f-cb">
          <!-- 办公地址 -->
          <p>{{ $t("m.OfficeAddress") }}</p>
          <span>{{ info.office_address }}</span>
        </li>
        <li class="f-cb">
          <p>{{ $t("m.Main_business") }}</p>
          <span>{{
            info.main_business == "" ? "--" : info.main_business
          }}</span>
        </li>
        <li class="f-cb">
          <p>{{ $t("m.CompanyProfile") }}</p>
          <span>{{ info.company_profile }}</span>
        </li>
      </ul>
      <h2>{{ $t("m.Dividends") }}</h2>
      <div class="table_pro">
        <div v-if="list.length == 0" class="zanwu"></div>
        <div v-else>
          <table
            class="table_pro_box"
            v-for="(item, index) in tableList"
            :key="index"
          >
            <tr>
              <td class="table_pro_thead">{{ $t("m.year") }}</td>
              <td
                class="table_pro_body"
                v-for="(items, index) in item"
                :key="index"
              >
                {{ items.notice_date.substring(0, 4) }}
              </td>
            </tr>
            <tr>
              <td class="table_pro_thead">{{ $t("m.Dis_scheme") }}</td>
              <td
                class="table_pro_body"
                v-for="(items, index) in item"
                :key="index"
              >
                {{ items.bonus_scheme }}
              </td>
            </tr>
            <tr>
              <td class="table_pro_thead">{{ $t("m.Dividend_date") }}</td>
              <td
                class="table_pro_body"
                v-for="(items, index) in item"
                :key="index"
              >
                {{ items.bonus_date }}
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div v-show="submit.market != 'SSE' && submit.market != 'SZSE'">
        <!-- 公司行动 -->
        <h2>{{$t('info.info_profile.56hza8fskqc0')}}</h2>
        <div class="table_pro">
          <div v-if="company.length == 0" class="zanwu"></div>
          <div v-else>
            <table
              class="table_pro_box"
              v-for="(item, index) in UlList"
              :key="index"
            >
              <tr>
                <td class="table_pro_thead">{{$t('info.info_profile.56hza8fslao0')}}</td>
                <td
                  class="table_pro_body"
                  v-for="(items, index) in item"
                  :key="index"
                >
                  {{ items.action_date }}
                </td>
              </tr>
              <tr>
                <td class="table_pro_thead">{{$t('info.info_profile.56hza8fskqc0')}}</td>
                <td
                  class="table_pro_body"
                  v-for="(items, index) in item"
                  :key="index"
                >
                  {{
                    items.type == 1
                      ? $t("account.company.56hqcd5ewx00")
                      : item.type == 2
                      ? $t("account.company.56hqqx4ewx00")
                      : item.type == 3
                      ? $t("account.company.56hq8csewx00")
                      : $t("account.company.5615452ewx00")
                  }}
                </td>
              </tr>
              <tr>
                <td class="table_pro_thead">{{$t('info.info_profile.56hza8fslf00')}}</td>
                <td
                  class="table_pro_body"
                  v-for="(items, index) in item"
                  :key="index"
                >
                  {{ items.scheme }}
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {get_stock_profit} from '@/assets/js/API/info.js'
export default {
  props: ["infoCode", "height", "stockType", "RefreshIndex"],
  data() {
    return {
      list: [],
      tableList: null,
      UlList: null,
      info: {},
      UlListSize: null,
      company: [],
      UlCompanySize: null,
      submit: {
        symbol: null,
        market: null,
        securityType: null,
      },
    };
  },
  created() {
    // this.getdata();
  },
  methods: {
    getdata() {
      let _this = this;
      _this.submit = {
        symbol: _this.infoCode.symbol,
        market: _this.infoCode.market,
        securityType: _this.infoCode.securityType,
      };
        get_stock_profit(_this.submit).then(function (response) {
          if (response.code == 1) {
            _this.$nextTick(()=> {
              _this.info = response.data.company.info;
              _this.list = response.data.bonus.list;
              _this.UlListSize = response.data.bonus.list.length;
              if(_this.UlListSize > 0)
                _this.tableList = _this.chunk(_this.list, 7);
              if(response.data.action && response.data.action.list != null && response.data.action.list != undefined) {
                _this.company = response.data.action.list;
                _this.UlList = _this.chunk(_this.company, 7);
                _this.UlCompanySize = response.data.action.list.length;
              }
            })
          } else {
            _this.$message({
              message: response.data.msg,
              type: "warning",
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 切割等长数组
    chunk(array, size) {
      //获取数组的长度，如果你传入的不是数组，那么获取到的就是undefined
      let length = array.length;
      //判断不是数组，或者size没有设置，size小于1，就返回空数组
      if (!length || !size || size < 1) {
        return [];
      }
      let index = 0; //用来表示切割元素的范围start
      let resIndex = 0; //用来递增表示输出数组的下标
      //根据length和size算出输出数组的长度，并且创建它。
      let num = Math.ceil(length / size);
      let result = new Array(num);
      //进行循环
      while (index < length) {
        //循环过程中设置result[0]和result[1]的值。该值根据array.slice切割得到。
        result[resIndex++] = array.slice(index, (index += size));
      }
      return result;
    },
  },
  watch: {
    infoCode(val) {
      if (val !== "") {
        this.submit.symbol = val.symbol;
        this.submit.market = val.market;
        this.submit.securityType = val.securityType;
        console.log(this.submit, "this.submit");
        this.getdata();
      }
    },
    RefreshIndex(val) {
      if (val !== "") {
        this.list = [];
        this.info = {};
        this.UlListSize = null;
        this.company = [];
        this.UlCompanySize = null;
        this.getdata();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.profile {
  h2 {
    font-size: 12px;
    color: @fff;
    line-height: 30px;
    padding: 6px 20px;
  }
  ul {
    padding: 5px 20px;
    border-bottom: 1px solid @LightBorderLine;
    li {
      font-size: 12px;
      color: @fbSix;
      line-height: 24px;
      width: 100%;
      padding: 3px 0;
      p {
        width: 109px;
        float: left;
        display: block;
      }
      span {
        display: block;
        float: left;
        width: calc(100% - 109px);
        color: @fff;
        text-align: left;
      }
    }
  }
  .table_pro_box {
    width: 1100px;
    border-bottom: 1px solid @LightBorderLine;
    margin: 6px 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    white-space: normal;
    font-size: 12px;
    .table_pro_thead {
      float: left;
      width: 120px;
      color: @fbSix;
      line-height: 18px;
      height: 36px;
    }
    .table_pro_body {
      float: left;
      width: 140px;
      color: @fff;
      line-height: 18px;
      height: 36px;
      word-wrap: break-word;
      word-break: break-all;
      margin: 1px 0;
    }
  }
}
</style>